import React from 'react';
import {
    Row,
    Col,
    Table,
    Modal,
    Form,
} from 'antd';
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import '../less/Rent.less';
import format from './format';
const FormItem = Form.Item;

const confirm = Modal.confirm;
class BalanceAlarms extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: true,
            user: user,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            keyword: ''
        };
    };
    componentDidMount() {
        this.getBalance();
    }

    search(value) {
        this.setState({ keyword: value });
        this.getBalance({ keyword: value });
    }
    onChange = (pagination, filters, sorter) => {
        this.getBalance({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            keyword: this.state.keyword,
            ...filters
        });
    };

    getBalance = (params = {}) => {
        var that = this;
        const token = sessionStorage.getItem("token");
        var keyword = typeof (params.keyword) === "undefined"
            ? ''
            : params.keyword;
        this.setState({ loading: true });
        axios.get(`${config.api}Rental/GetRefundInfo?page=1&pageSize=100000000&keyword=${keyword}`, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                data.data.pageList.collections.forEach(function (item, index) {
                    item.applyTime = format.format(item.applyTime);
                    if (item.refundTime !== null && typeof (item.refundTime) !== undefined) {
                        item.refundTime = format.format(item.refundTime);
                        item.refundStatus = '已退款';
                    } else {
                        item.refundTime = '正在退款中...'
                        item.refundStatus = '退款中';
                    }
                });
                const pagination = {
                    ...this.state.pagination
                };
                pagination.total = data.data.pageList.totalRows;
                pagination.current = params.page;
                this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
            }
        })
        .catch(err => {
            intercept;
        })
    }

    render() {
        const Search = Input.Search;
        const { visible, confirmLoading, } = this.state;
        const column = [
            {
                title: "订单号",
                dataIndex: "orderCode",
                width: 180
            }, {
                title: "退款金额(元)",
                dataIndex: "actualRefundAmount",
                width: 80
            }, {
                title: "申请人",
                dataIndex: "applyOperater",
                width: 130
            }, {
                title: "申请退款时间",
                dataIndex: "applyTime",
                width: 180
            }, {
                title: "退款时间",
                dataIndex: "refundTime",
                width: 180
            }, {
                title: "退款原因",
                dataIndex: "refundContent",
                width: 250
            }, {
                title: "退款账号",
                dataIndex: "refundChannel",
                width: 140,
            }, {
                title: '操作',
                width: 100,
                dataIndex: "refundStatus"
            }
        ];
        const { getFieldDecorator } = this.props.form;
        const className = "components-table-demo-nested";
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 14
                }
            }
        };
        return (
            <div>
                <Row gutter={8}>
                    <Col span={24}>
                        <div className="searchCenter">
                            <Search
                                placeholder="请输入订单号"
                                style={{
                                    width: 600
                                }}
                                onSearch={value => this.search(value)} />
                        </div>
                        {/* <h2 className='refTitle'>退款订单</h2> */}

                        <Table
                            style={{ textAlign: 'center' }}
                            {...this.state}
                            className='content'
                            rowKey={record => record.applyTime}
                            columns={column}
                            bordered={true}
                            loading={this.state.loading} />
                    </Col>
                </Row>
            </div>
        )
    }

}
const BalanceAlarm = Form.create()(BalanceAlarms);
export default BalanceAlarm